import React, { useEffect } from 'react';
import { Box, keyframes, useDisclosure, useMediaQuery } from '@chakra-ui/react';
import LoadingModal from '../ui/LoadingModal';
import useNewUser from '../hooks/useNewUser';
import { useAppDispatch } from '../../redux/hooks';
import getAllThemesThunk from '../../redux/themes/thunks';


const wave = keyframes`
  0%, 60%, 100% {
    transform: initial;
  }
  30% {
    transform: translateY(-15px);
  }
`;

export default function LoadingPage(): JSX.Element {
  const [isLargerThanPhone] = useMediaQuery('(min-width: 800px)');

  const dispatch = useAppDispatch();
  useNewUser();
  const {  onOpen } = useDisclosure();
  useEffect(() => {
    onOpen();
    console.log('MODAL');
  }, []);

  useEffect(() => {
    void dispatch(getAllThemesThunk());
  }, [dispatch]);
  
  const loadingArray = 'ОЖИДАЙТЕ  НАЧАЛА  ИГРЫ...'.split('');

  return (
    <Box
      bgImage="url('/img/3.png')"
      bgSize="cover"
      bgPosition="center"
      bgRepeat="no-repeat"
      height="100vh"
      display="flex"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
    >
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <img
          src="https://media1.tenor.com/m/2WtBkf2YI00AAAAC/bean-mr.gif"
          alt="velo"
          style={{ margin: '60px' }}
        />
      </div>
      <Box display="flex" flexWrap="wrap" justifyContent="center">
        <LoadingModal  />
        {loadingArray.map((letter, index) => (
          <Box
            // eslint-disable-next-line react/no-array-index-key
            key={`loading-${index}`}
            fontSize= {isLargerThanPhone ? "6xl" : "1xl"}
            fontWeight="bold"
            color="yellow.400"
            mx="2px"
            animation={`${wave} 1.2s ease-in-out infinite`}
            style={{
              animationDelay: `${index / 10}s`,
              display: 'inline-block',
              textShadow: `
                1px 1px #000,
                -1px 1px #000,
                1px -1px #000,
                -1px -1px #000,
                0 2px 3px #00000050`,
            }}
          >
            {letter === ' ' ? '\u00A0' : letter}
          </Box>
        ))}
      </Box>
    </Box>
  );
}
